<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>版块</el-breadcrumb-item>
      <el-breadcrumb-item>发表帖子</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card>
      <el-form :model="pulishForm" :rules="pulishFormRules" ref="pulishFormRef" label-width="0" class="demo-ruleForm">
        <el-form-item label="">
          <el-row type="flex" justify="space-between">
            <el-col :span="16">
              <el-form-item >
                <el-input v-model="publish_tit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="" prop="theme_value">
                <el-select v-model="theme_value" clearable placeholder="请选择">
                  <el-option
                    v-for="item in theme_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="theme_value">
          <mavon-editor v-model="publish_val" ref="md"></mavon-editor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="handlePublish">发表帖子</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // 帖子主题
      // post_tit: '',
      publish_tit: '',
      // 主题
      theme_value: '',
      // 发帖的内容
      publish_val: '',
      // 主题选项
      theme_options: [
        {
          value: 'share',
          label: '分享'
        },
        {
          value: 'ask',
          label: '问答'
        },
        {
          value: 'job',
          label: '招聘'
        },
        {
          value: 'good',
          label: '精华'
        }
      ],
      // 发帖表单
      pulishForm: {
        publish_tit: '',
        theme_value: '',
        publish_val: ''
      },
      // 发帖表单校验规则
      pulishFormRules: {
        publish_tit: [
          { required: true, message: '请输入帖子标题', trigger: 'blur' }
        ],
        theme_value: [
          { required: true, message: '请选择帖子主题', trigger: 'blur' }
        ],
        publish_val: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState(['loginId'])
  },
  created () {},
  methods: {
    // 提交帖子
    handlePublish () {
      const d = new Date()
      const time = d.toLocaleString().replace('下午', '').replace('上午', '')
      console.log(this.loginId.replace(/"/g, ''))
      const obj = {
        id: this.loginId.replace(/"/g, ''),
        author: {
          loginname: '游客',
          avatar_url: ''
        },
        title: this.publish_tit,
        create_at: new Date(time).toJSON(),
        tab: this.theme_value || '分享',
        content: this.$refs.md.d_render.replace(/<br \/>/g, '\n') || '无',
        visit_count: 0,
        reply_count: 0
      }
      // console.log(obj)
      // eslint-disable-next-line eqeqeq
      if (obj.title == '') {
        return
      }
      this.$store.commit('addTopic', obj)

      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}

.el-card {
  margin-top: 20px;
}

.content_box {
  margin-top: 20px;
}
</style>
